<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>模板字符串</title>
</head>
<body>
  <script>
    // 如果要再模板字符串中使用反引号，则前面要用反斜杆转义。
    let greeting = `\`Yo\`World!`
    console.log(greeting)
    // 如果使用模板字符串表示多行字符串，所有的空格和缩进都会被保留在输出之中。
    let a = `你
    在
    说
    你
    吗？`
    console.log(a)
    // 据说用trim方法可以消除换行，这里却并没有生效，，，，，
    console.log(a.trim())
  </script>
  <script>
    // 大括号内部可以放入任意的JavaScript表达式，可以进行运算，以及引用对象属性。
    let x = 1
    let y = 2
    `${x} + ${y} = ${x + y}`
    // "1 + 2 = 3"
    `${x} + ${y * 2} = ${x + y * 2}`
    // "1 + 4 = 5"
    let obj = {x: 1, y: 2};
    `${obj.x + obj.y}`
    // "3"
  </script>
  <script>
    // 模板字符串之中还能调用函数
    function fn() {
      return "Hello World"
    }
    `foo ${fn()} bar`
    // foo Hello World bar
    //如果大括号中的值不是字符串，将按照一般的规则转为字符串。比如，大括号中是一个对象，将默认调用对象的toString方法。
    //如果模板字符串中的变量没有声明，将报错。
    //由于模板字符串的大括号内部，就是执行 JavaScript 代码，因此如果大括号内部是一个字符串，将会原样输出。
    `Hello ${'World'}`
    // "Hello World"
    // 模板字符串还能嵌套
  </script>
  <script>
    // 如果你需要引用模板字符串本身，在需要时执行，可以写成函数。
    let func = (name) => `Hello ${name}!`;
    func('Jack') // "Hello Jack!"
    //上面代码中，模板字符串写成了一个函数的返回值。执行这个函数，就相当于执行这个模板字符串了。
  </script>
</body>
</html>